<!--Created by yangzhiqiang -->
<template>
    <div class="login">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div class="panel panel-default login-panel">
                        <div class="panel-heading">
                            <h3 class="panel-title">用户登录</h3>
                        </div>
                        <div class="panel-body">
                            <div class="login_box">
                                <div>
                                    <div class="login_boxbg">
                                        <el-input v-model="email"  size="large" auto-complete="on"
                                         placeholder="Email" ></el-input>
                                    </div>
                                    <div class="login_boxbg">
                                        <el-input v-model="password"  type="password" size="large" placeholder="Password"></el-input>
                                    </div>
                                    <div class="tips" v-show="tipsshow">{{tips}}</div>
                                    <el-button  class="login_btn" @click="loginjumpto">登 录</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
const probeApiV100 = '/probe/api/v100/';
export default {
    name: 'login',
    data() {
        return {
            //todo 这里是data区域
            email: '',
            password: '',
            tips: '请输入正确密码',
            tipsshow: false
        }
    },
    components: {
        //TODO 添加子组件
    },
    computed: {
        //TODO 计算区
    },
    methods: {
        //TODO 方法区
        loginjumpto() {
            let _self = this;
            if (this.email == '' || this.password == '') {
                this.tips = '请输入正确邮箱和密码'
                this.tipsshow = true;
                setTimeout(function () {
                    _self.tipsshow = false;
                }, 1000)
                return;
            }
            // yaoqi.li@bangcle.com 
            // 123456
            this.$axios.get(probeApiV100 + 'auth/login', {
                params:{
                    password: this.password,
                    email: this.email
                }
            })
                .then(res => {
                    console.log(res)
                    //if (res.data.code == 100) {
                        this.$router.push('/')
                    //}
                })
                .catch(err => { console.log(err) })
            // this.$axios.get('/probe/api/v100/auth/login', {
            //     password: this.password,
            //     email: this.email,
            // })
            // //  this.$axios.post('/vpnapi/dologin', {
            // //     password: this.password,
            // //     email: this.email,
            // // })
            //     .then(response => {
            //         console.log(response)
            //         if (response.data.code == 100) {
            //             this.$router.push('/')
            //         }

            //     }).catch(err => { console.log(err) })

        }
    },
    mounted: function () {

        //TODO 函数执行区域
    }
}
</script>
<style lang="scss" scoped>
.login {
    background: #f8f8f8;
    padding-top: 90px;
}
.login_boxbg{
    margin-bottom: 30px;
    height: 52px;
}
.login-panel{
    position: relative;
}
.login_box .tips {
    color: red;
    position: absolute;
    top: 185px;
    left: 80px;
}
.login_btn{
    width: 100%;
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
}
</style>
